<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button @click="sub">-1</button>
    <span>{{count}}</span>
    <button @click="add">+1</button>
    <button @click="getThis">点击</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    methods:用于声明要混入到组件实例中的方法。
        声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。所有的方法都会将它们的 this 上下文自动绑定为组件实例，即使在传递时也如此。
        在声明方法时避免使用箭头函数，因为它们不能通过 this 访问组件实例。
    * */
    const app = Vue.createApp({
        data() {
            return {count: 0}
        },
        methods: {
            add() {
                this.count++
            },
            sub() {
                this.count--
            },
            getThis: () => {
                // methods中的方法使用了箭头函数，this就会向上级作用域查找(此时会指向window)
                console.log(this)
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>